<script setup lang="ts">

import {useSelfDtum} from "../../hooks/useSelfDtum.ts";
import {ArrowRight, UserFilled} from "@element-plus/icons-vue";
import NoVipTextView from "../components/NoVipTextView.vue";
import {mainStore} from "../../store/store.ts";
import {onMounted} from "vue";
import BasicInformationView from "./BasicInformationView.vue";
import UserBasicContentView from "./UserBasicContentView.vue";
import UserEducationView from "./UserEducationView.vue";
import UserWorkView from "./UserWorkView.vue";
import UserLikeView from "./UserLikeView.vue";
import UserIdentityView from "./UserIdentityView.vue";
import {storeToRefs} from "pinia";
import {useRouter} from "vue-router";

const router = useRouter()
const store = mainStore()

const {userName, account} = storeToRefs(store)

onMounted(() => {
  setTimeout(() => {
    let {getter_loginStatus} = store;
    if (!getter_loginStatus()) {
      router.push('/')
    }
  }, 1000)
})

const {img, circleUrl, medal, money} = useSelfDtum()
</script>

<template>
  <div class="self-header">
    <div class="self-header-img-box">
      <el-avatar :src="circleUrl" class="avatar-size" :icon="UserFilled"/>
    </div>
    <div class="self-header-info-box">
      <div class="width-full-box header-grade-flex-box">
        <el-text class="self-header-name name-size">{{ userName }}</el-text>
        <div class="grade-box">
          <el-image class="grade-size" :src="img "/>
          <el-text class="grade-text-year-color">码龄3年</el-text>
        </div>
      </div>
      <div class="width-full-box medal-box">
        <el-tooltip v-for="item in medal" :content="item.toopTip" placement="bottom" effect="dark">
          <el-image class="medal-size" :src="item.path"></el-image>
        </el-tooltip>
        <el-button class="margin-left-10" link>
          <el-text>完成任务即可点亮哦～</el-text>
          <el-icon>
            <ArrowRight/>
          </el-icon>
        </el-button>
      </div>
      <div class="width-full-box">
        <no-vip-text-view></no-vip-text-view>
      </div>
    </div>
  </div>
  <div class="user-mon">
    <div class="user-mon-icon-box margin-left-10">
      <el-image class="user-mon-icon" :src="money"></el-image>
    </div>
    <el-text class="margin-left-5 having-money-color">我的余额:</el-text>
    <el-text class="margin-left-20">10</el-text>
    <el-button :color="'#FC5531'" class="money-btn money-btn-color margin-left-15" round>去充值</el-button>
    <el-divider class="divider-hei margin-left-20" direction="vertical"/>
    <el-button class="money-btn margin-left-10" round>个人主页</el-button>
  </div>

  <basic-information-view title="基本信息" types="basic">
    <user-basic-content-view :account="account"></user-basic-content-view>
  </basic-information-view>

  <basic-information-view title="教育信息" types="edu">
    <user-education-view :account="account"></user-education-view>
  </basic-information-view>

  <basic-information-view title="工作信息" types="work">
    <user-work-view :account="account"></user-work-view>
  </basic-information-view>

  <basic-information-view title="兴趣标签" types="like">
    <user-like-view :account="account"></user-like-view>
  </basic-information-view>

  <basic-information-view title="身份标签" types="self">
    <user-identity-view :account="account"></user-identity-view>
  </basic-information-view>

</template>

<style scoped lang="scss">
@import "../style/SelfDatum";
</style>